<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单</title>

    <script src="http://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="http://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="http://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>

    <!--标题部分-->
    <style>
        div.boughtDiv{
            max-width: 1013px;
            margin: 10px auto;
        }
        /*订单栏标题*/
        div.orderType div{
            float: left;
            height: 35px;
            border-bottom: 2px solid #E8E8E8;
        }
        div.orderType a{
            border-right: 1px solid #E8E8E8;
            font-weight: bold;
            font-size: 16px;
            color: black;
            margin-bottom: 10px;
            padding: 0px 20px;
            text-decoration: none;
        }
        div.orderType a:hover{
            color: #C40000;
            text-decoration: none;
        }
        /*被选中的订单类型*/
        div.orderType div.selectedOrderType{
            border-bottom: 2px solid #C40000;
        }
        div.orderType div.selectedOrderType a{
            color: #C40000;
        }
        /*订单栏标题部分最右边空的div*/
        div.orderTypeLastOne{
            height: 35px;
            border-bottom: 2px solid #E8E8E8;
            overflow: hidden;
            float: none !important; /*取消浮动，就会自动出现在右边，并且把剩下的占满*/
        }
        a.noRightborder{
            border-right: 0px !important;
        }

        /*订单内容标题*/
        table.orderListTitleTable{
            border: 1px solid #E8E8E8;
            width: 100%;
            margin: 20px 0%;
            background-color: #F5F5F5;
            text-align: center;
            font-size: 12px;
        }
        table.orderListTitleTable td{
            padding: 12px 0px;
        }
    </style>

    <!--产品列表部分-->
    <style>
        table.orderListItemTable{
            border: 2px solid #ECECEC;
            width: 100%;
            margin: 20px 0px;
            font-size: 12px;
        }
        table.orderListTitleTable:hover{
            border-right: 2px solid #aaa !important;
        }
        table.orderListItemTable td{
            padding: 8px 10px;
        }
        tr.orderListItemFirstTR{
            background-color: #F1F1F1;
        }
        /*旺旺图表*/
        div.orderItemWangWangGif{
            display: inline-block;
            width: 67px;
            height: 22px;
            background-image: url("http://how2j.cn/tmall/img/site/wangwang.gif");

            background-repeat: no-repeat;
            background-color: transparent;
            background-attachment: scroll;
            background-position: -0px -0px;
            position: relative;
            top: 0px;
            left: 2px;
        }
        /*删除标志*/
        td.orderItemDeleteTD{
            text-align: right;
        }
        span.orderListItemDelete{
            display: inline-block;
            margin: 0px 10px;
            color: #999999;
            font-size: 16px;
        }
        /*产品连接外部div*/
        div.orderListItemProductLinkOutDiv{
            position: relative;
            height: 80px;
        }
        div.orderListItemProductLinkInnerDiv{
            position: absolute;
            bottom: 0px;
        }
        /*价格*/
        div.orderListItemProductOriginalPrice{
            color: #999999;
            font-size: 14px;
        }
        div.orderListItemProductPrice{
            color: #3C3C3C;
            font-size: 14px;
        }
        /*数量*/
        td.orderListItemNumberTD{
            text-align: center;
        }
        span.orderListItemNumberTD{
            color: #3C3C3C;
        }

        td.orderItemOrderInfoPartTD{
            border:1px solid #ECECEC;
        }
        td.orderListItemProductRealPriceTD{
            text-align: center;
        }

        div.orderListItemProductRealPrice{
            color: #3C3C3C;
            font-size: 14px;
            font-weight: bold;
        }
        div.orderListItemPriceWithTransport{
            color: #6C6C6C;
            font-size: 12px;
        }
        td.orderListItemButtonTD{
            text-align: center;
        }
        button.orderListItemReview{
            border: 1px solid #DCDCDC;
            background-color: #fff;
            border-radius: 2px;
            color: #3C3C3C;
            font-size: 12px;
            font-weight: bold;
            padding: 6px 12px;
        }
        button.orderListItemReview:hover{
            border-color: #C40000;
            color: #C40000;
        }
        button.orderListItemConfirm{
            background-color: #66B6FF;
            border-radius: 2px;
            color: white;
            font-size: 12px;
            font-weight: bold;
            border-width: 0px;
            padding: 6px 12px;
        }
        button.orderListItemConfirm:hover{
            background-color: #118ADB;
        }
        a{
            color:#999;
        }
        a:hover{
            text-decoration:none;
            color: #C40000;
        }
    </style>
</head>
<body>
<div class="boughtDiv">
    <!--订单栏标题-->
    <div class="orderType">
        <!--class="selectedOrderType"表示哪个订单类型被用户选中-->
        <div class="selectedOrderType"><a href="#nowhere" orderstatus="all">所有订单</a></div>
        <div><a href="#nowhere" orderstatus="waitPay">待付款</a></div>
        <div><a href="#nowhere" orderstatus="waitDelivery">待发货</a></div>
        <div><a href="#nowhere" orderstatus="waitConfirm">待收货</a></div>
        <div><a class="noRightborder" href="#nowhere" orderstatus="waitReview">待评价</a></div>
        <!--表示标题处最右边空的部分-->
        <div class="orderTypeLastOne"></div>
    </div>
    <div style="clear: both;"></div>
    <!--订单内容标题-->
    <div class="orderListTitle">
        <table class="orderListTitleTable">
            <tbody>
                <tr>
                    <td>宝贝</td>
                    <td width="100px">单价</td>
                    <td width="100px">数量</td>
                    <td width="120px">实付款</td>
                    <td width="100px">交易操作</td>
                </tr>
            </tbody>
        </table>
    </div>

    <!--产品列表部分-->
    <div class="orderListItem">
        <!--评价-->
        <table oid="946"  orderstatus="waitReview" class="orderListItemTable">
            <tr class="orderListItemFirstTR">
                <td colspan="2">
                    <b>2016-09-12 17:00:41</b>
                    <span>订单号: 20160912170041674794
                    </span>
                </td>
                <td colspan="2"><img width="13px" src="http://how2j.cn/tmall/img/site/orderItemTmall.png">天猫商场</td>
                <td colspan="1">
                    <a href="#nowhere" class="wangwanglink">
                        <div class="orderItemWangWangGif"></div>
                    </a>
                </td>
                <td class="orderItemDeleteTD">
                    <a href="#nowhere" oid="946" class="deleteOrderLink">
                        <span class="orderListItemDelete glyphicon glyphicon-trash"></span>
                    </a>
                </td>
            </tr>
            <tr class="orderItemProductInfoPartTR">
                <td class="orderItemProductInfoPartTD"><img width="80" height="80" src="http://how2j.cn/tmall/img/productSingle_middle/3796.jpg"></td>
                <td class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductLinkOutDiv">
                        <a href="#nowhere">公众智能扫地机器人家用全自动电动清洁地毯擦拖地一体机吸尘器</a>
                        <div class="orderListItemProductLinkInnerDiv">
                            <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                            <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                            <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                        </div>
                    </div>
                </td>
                <td width="100px" class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductOriginalPrice">￥2,499.00</div>
                    <div class="orderListItemProductPrice">￥2,124.15</div>
                </td>
                <td width="100px" valign="top" class="orderListItemNumberTD orderItemOrderInfoPartTD" rowspan="1">
                    <span class="orderListItemNumber">1</span>
                </td>
                <td width="120px" valign="top" class="orderListItemProductRealPriceTD orderItemOrderInfoPartTD" rowspan="1">
                    <div class="orderListItemProductRealPrice">￥2,124.15</div>
                    <div class="orderListItemPriceWithTransport">(含运费：￥0.00)</div>
                </td>
                <td width="100px" valign="top" class="orderListItemButtonTD orderItemOrderInfoPartTD" rowspan="1">
                    <a href="#nowhere">
                        <button class="orderListItemReview">评价</button>
                    </a>
                </td>
            </tr>
        </table>
        <!--确认收货-->
        <table oid="945" orderstatus="waitConfirm" class="orderListItemTable">
            <tbody><tr class="orderListItemFirstTR">
                <td colspan="2">
                    <b>2016-09-12 17:00:33</b>
                    <span>订单号: 201609121700333128784
                    </span>
                </td>
                <td colspan="2"><img width="13px" src="http://how2j.cn/tmall/img/site/orderItemTmall.png">天猫商场</td>
                <td colspan="1">
                    <a href="#nowhere" class="wangwanglink">
                        <div class="orderItemWangWangGif"></div>
                    </a>
                </td>
                <td class="orderItemDeleteTD">
                    <a href="#nowhere" oid="945" class="deleteOrderLink">
                        <span class="orderListItemDelete glyphicon glyphicon-trash"></span>
                    </a>
                </td>
            </tr>
            <tr class="orderItemProductInfoPartTR">
                <td class="orderItemProductInfoPartTD"><img width="80" height="80" src="http://how2j.cn/tmall/img/productSingle_middle/6651.jpg"></td>
                <td class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductLinkOutDiv">
                        <a href="#nowhere">ULIFE原创信封包男个性真皮手包男士手拿包休闲男包手抓包拉链潮</a>
                        <div class="orderListItemProductLinkInnerDiv">
                            <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                            <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                            <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                        </div>
                    </div>
                </td>
                <td width="100px" class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductOriginalPrice">￥1,188.00</div>
                    <div class="orderListItemProductPrice">￥1,128.60</div>
                </td>
                <td width="100px" valign="top" class="orderListItemNumberTD orderItemOrderInfoPartTD" rowspan="1">
                    <span class="orderListItemNumber">1</span>
                </td>
                <td width="120px" valign="top" class="orderListItemProductRealPriceTD orderItemOrderInfoPartTD" rowspan="1">
                    <div class="orderListItemProductRealPrice">￥1,128.60</div>
                    <div class="orderListItemPriceWithTransport">(含运费：￥0.00)</div>
                </td>
                <td width="100px" valign="top" class="orderListItemButtonTD orderItemOrderInfoPartTD" rowspan="1">
                    <a href="#nowhere">
                        <button class="orderListItemConfirm">确认收货</button>
                    </a>
                </td>
            </tr>
            </tbody></table>
        <!--待发货-->
        <table oid="944" orderstatus="waitDelivery" class="orderListItemTable" style="display: table;">
            <tbody>
            <tr class="orderListItemFirstTR">
                <td colspan="2">
                    <b>2016-09-12 17:00:16</b>
                    <span>订单号: 201609121700167279660
                    </span>
                </td>
                <td colspan="2"><img width="13px" src="http://how2j.cn/tmall/img/site/orderItemTmall.png">天猫商场</td>
                <td colspan="1">
                    <a href="#nowhere" class="wangwanglink">
                        <div class="orderItemWangWangGif"></div>
                    </a>
                </td>
                <td class="orderItemDeleteTD">
                    <a href="#nowhere" oid="944" class="deleteOrderLink">
                        <span class="orderListItemDelete glyphicon glyphicon-trash"></span>
                    </a>
                </td>
            </tr>
            <tr class="orderItemProductInfoPartTR">
                <td class="orderItemProductInfoPartTD"><img width="80" height="80" src="http://how2j.cn/tmall/img/productSingle_middle/8697.jpg"></td>
                <td class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductLinkOutDiv">
                        <a href="#nowhere">2016夏季新款女装雪纺衫短裤两件套 韩版时尚名媛休闲套装女夏装</a>
                        <div class="orderListItemProductLinkInnerDiv">
                            <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                            <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                            <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                        </div>
                    </div>
                </td>
                <td width="100px" class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductOriginalPrice">￥263.00</div>
                    <div class="orderListItemProductPrice">￥236.70</div>
                </td>
                <td width="100px" valign="top" class="orderListItemNumberTD orderItemOrderInfoPartTD" rowspan="1">
                    <span class="orderListItemNumber">1</span>
                </td>
                <td width="120px" valign="top" class="orderListItemProductRealPriceTD orderItemOrderInfoPartTD" rowspan="1">
                    <div class="orderListItemProductRealPrice">￥236.70</div>
                    <div class="orderListItemPriceWithTransport">(含运费：￥0.00)</div>
                </td>
                <td width="100px" valign="top" class="orderListItemButtonTD orderItemOrderInfoPartTD" rowspan="1">
                    <span>待发货</span>
                </td>
            </tr>
            </tbody>
        </table>
        <!--待付款-->
        <table oid="943" orderstatus="waitPay" class="orderListItemTable" style="display: table;">
            <tbody><tr class="orderListItemFirstTR">
                <td colspan="2">
                    <b>2016-09-12 17:00:09</b>
                    <span>订单号: 201609121700098025374
                    </span>
                </td>
                <td colspan="2"><img width="13px" src="http://how2j.cn/tmall/img/site/orderItemTmall.png">天猫商场</td>
                <td colspan="1">
                    <a href="#nowhere" class="wangwanglink">
                        <div class="orderItemWangWangGif"></div>
                    </a>
                </td>
                <td class="orderItemDeleteTD">
                    <a href="#nowhere" oid="943" class="deleteOrderLink">
                        <span class="orderListItemDelete glyphicon glyphicon-trash"></span>
                    </a>
                </td>
            </tr>
            <tr class="orderItemProductInfoPartTR">
                <td class="orderItemProductInfoPartTD"><img width="80" height="80" src="http://how2j.cn/tmall/img/productSingle_middle/5266.jpg"></td>
                <td class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductLinkOutDiv">
                        <a href="#nowhere">米纳专柜新款女式手表时尚简约陶瓷表女士手表女表正品防水石英表</a>
                        <div class="orderListItemProductLinkInnerDiv">
                            <img title="支持信用卡支付" src="http://how2j.cn/tmall/img/site/creditcard.png">
                            <img title="消费者保障服务,承诺7天退货" src="http://how2j.cn/tmall/img/site/7day.png">
                            <img title="消费者保障服务,承诺如实描述" src="http://how2j.cn/tmall/img/site/promise.png">
                        </div>
                    </div>
                </td>
                <td width="100px" class="orderItemProductInfoPartTD">
                    <div class="orderListItemProductOriginalPrice">￥1,880.00</div>
                    <div class="orderListItemProductPrice">￥1,316.00</div>
                </td>
                <td width="100px" valign="top" class="orderListItemNumberTD orderItemOrderInfoPartTD" rowspan="1">
                    <span class="orderListItemNumber">1</span>
                </td>
                <td width="120px" valign="top" class="orderListItemProductRealPriceTD orderItemOrderInfoPartTD" rowspan="1">
                    <div class="orderListItemProductRealPrice">￥1,316.00</div>
                    <div class="orderListItemPriceWithTransport">(含运费：￥0.00)</div>
                </td>
                <td width="100px" valign="top" class="orderListItemButtonTD orderItemOrderInfoPartTD" rowspan="1">
                    <a href="#nowhere">
                        <button class="orderListItemConfirm">付款</button>
                    </a>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
</body>
<script>
    $(function () {
       $("div.orderType a[orderStatus]").click(function () {
           var orderstatus = $(this).attr("orderstatus");
           if("all" == orderstatus){
               $("div.orderListItem table[orderStatus]").show();
           }else{
               $("div.orderListItem table[orderStatus]").hide();
               $("div.orderListItem table[orderstatus="+orderstatus+"]").show();
           }
           $("div.orderType div").removeClass("selectedOrderType");
           $(this).parent("div").addClass("selectedOrderType");
       });
    });
</script>
</html>